2023 iThome 鐵人賽

DAY 28

Modern Web

30天前端學習筆記心得系列第 30 篇

Day28-JavaScript DOM(尋找元素、節點物件屬性)

15th鐵人賽

cindy7020

2023-10-13 11:01:52

427 瀏覽

分享至

文件物件模型(Document Object Model)

一種程式介面，存取修改 HTML和XML 文件結構、內容、樣式

DOM將 HTML 文件用樹狀結構表示，每個節點表示文件中一個元素或內容
根節點是 <html> 標籤，所有其他元素都是根節點的子節點

圖片來源:JavaScript DOM (Document Object Model)

尋找元素(DOM Traversing)

getElementById(id)

取得具有指定 ID 元素

//語法
const element = document.getElementById("context");

const element = document.getElementById('myDiv');

// 取元素的值
const divValue = myDiv.textContent;

// 設定元素樣式
myDiv.style.backgroundColor = 'Blue';

// 新增一個新元素到文件中
const newElement = document.createElement('p');
newElement.textContent = 'This is 2023 iThome';
myDiv.appendChild(newElement);

getElementsByName()

回傳一個包含有指定 name屬性 元素的 NodeList集合

//語法
const element = document.getElementsByName('name');

<input type="text" name="myInput">
<input type="submit" name="mySubmit">

const inputElements = document.getElementsByName('myInput');
const submitElements = document.getElementsByName('mySubmit');

console.log(inputElements); // NodeList [input]
console.log(submitElements); // NodeList [input]

甚至可以選取和操作網頁文件中元素

取得表單輸入欄位的值
啟用或停用按鈕
變更一組元素樣式
新增或移除元素

<input type="text" name="myInput">
<input type="submit" name="mySubmit">

const inputElement = document.getElementsByName('myInput')[0];
const submitElement = document.getElementsByName('mySubmit')[0];

// 取輸入欄位值
const inputValue = inputElement.value;

// 啟用或停用提交按鈕
submitElement.disabled = inputValue === '';

// 變更輸入欄位樣式
inputElement.style.backgroundColor = 'Blue';

// 新增一個新元素到文件
const newElement = document.createElement('p');
newElement.textContent = 'This is 2023 iThome';
document.body.appendChild(newElement);

getElementsByTagName()

取得具有指定 標籤名稱 所有元素

//語法
const paragraphs = document.getElementsByTagName("p");    

var paragraph = document.getElementsByTagName("p");

for (var i = 0; i < paragraph.length; i++) {
  console.log(paragraph[i].textContent);
}

getElementsByClassName()

取得具有指定 類別名稱 所有元素

//語法
const element = document.getElementsByClassName("class");

var myClassElement = document.getElementsByClassName("class");

for (var i = 0; i < myClassElement.length; i++) {
  console.log(myClassElement[i].textContent);
}

querySelector()

用 CSS選擇器 取得元素

以下程式碼會取得 class="my-class"

const element = document.querySelector(".my-class");

querySelectorAll()

用 CSS選擇器 取得所有符合條件元素

以下程式碼會取得所有 class="my-class" 或 id="my-element"

const elements = document.querySelectorAll(".my-class, #my-element");

`querySelector()`、`querySelectorAll()`區別

querySelector() 返回匹配指定選擇器第一個元素
querySelectorAll() 返回所有匹配指定選擇器元素的集合
querySelector() 返回 Element對象 是不可變的
querySelectorAll() 返回 NodeList對象 是可變的

// querySelector()
var myElement = document.querySelector("#my-element");

// querySelectorAll()
var myElements = document.querySelectorAll("#my-element");

console.log(myElement); // <div id="my-element"></div>
console.log(myElements); // [<div id="my-element"></div>]

DOM節點物件屬性(DOM Node Properties)

代表 HTML元素 或其他結構物件

innerHTML()

將元素內容替換為指定 HTML字符串

element.innerHTML = '<h1>Hello world</h1>';

innerText()

將元素文本內容替換為指定文本字符串

element.innerText = 'Hello world';

textContent()

將元素內容替換為指定文本字符串

element.textContent = 'Hello world';

`innerHTML()`、`innerText()`、`textContent()`區別

innerHTML() 返回或設定元素 HTML內容，包括 元素所有子元素
innerText() 返回或設定元素 文字內容，不包括 元素所有子元素
textContent() 返回或設定元素 文字內容，不包括 元素所有子元素

// innerHTML()
var myElement = document.getElementById("my-element");

myElement.innerHTML = "<div id=\"my-element\">Hello world</div>";

console.log(myElement.innerHTML); // <div id=\"my-element\">Hello world</div>

// innerText
myElement.innerText = "Hello world";

console.log(myElement.innerText); // Hello world

// textContent()
myElement.textContent = "Hello world";

console.log(myElement.textContent); // Hello world

資料來源:JavaScript DOM (Document Object Model)
JavaScript DOM 查找元素 (DOM Traversing)
JavaScript DOM Node Properties (DOM 節點物件的屬性)